import { WeaBrowser } from 'ecCom';

import { isArray } from 'lodash';
import { toJS } from 'mobx';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { searchPngImg, requiredPngImg } from '.';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class WeaBrowserCellType extends GC.Spread.Sheets.CellTypes.Base {
    typeName = 'WeaBrowserCellType';
    fieldType;
    browserType;
    browserTitile;
    dataParams = {};
    tabs = [];
    browserInstance;
    viewAttr = 2;
    label;
    clickwidth;
    paint(ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }
        if (this.viewAttr != 1) {
            super.paint(ctx, value, x, y, w - 20, h, style, context);
            super.paint(ctx, '', x + w - 20, y, 20, h, style, context);
            const width = Math.min(16, h);
            if (this.viewAttr == 2) {
                this.clickwidth = width;
                ctx.drawImage(searchPngImg, x + w - width, y + (h - width) / 2, width, width);
            } else if (this.viewAttr == 3) {
                if (value && value.length > 0) {
                    this.clickwidth = width;
                    ctx.drawImage(searchPngImg, x + w - width, y + (h - width) / 2, width, width);
                } else {
                    this.clickwidth = width + 9;
                    ctx.drawImage(searchPngImg, x + w - this.clickwidth, y + (h - width) / 2, width, width);
                    ctx.drawImage(requiredPngImg, x + w - 8, y + (h - 7) / 2, 7, 7);
                }

            }

        } else {
            super.paint(ctx, value, x, y, w, h, style, context);
        }

    }
    format(value, format, formattedData, context) {
        if (isArray(value)) {
            return value.filter(d => typeof d !== 'function').map(d => d.names || d.name).join(',');
        } else {
            return '';
        }
    }
    fromJSON(setting) {
        this.fieldType = toJS(setting.fieldType);
        this.viewAttr = setting.viewAttr;
        this.label = setting.label;
        this.browserType = this.fieldType[1].value;
        if (this.fieldType.length == 2) {

            this.browserTitile = this.fieldType[1].valueSpan;
        } else {
            if (this.fieldType[1]["valueObj"]) {
                this.browserTitile = this.fieldType[1]["valueObj"][0].name;
            } else {
                this.browserTitile = this.fieldType[1].valueSpan;
            }

        }

        if (this.browserType === '161' || this.browserType === '162' || this.browserType === '256' || this.browserType === '257') {
            this.dataParams = { ...this.dataParams, type: (this.fieldType[2] || {}).value }
        }
        if (this.browserType === '4' || this.browserType === '57' || this.browserType === '167' || this.browserType === '168') {
            this.tabs = {
                tabs: [{
                    "key": "2",
                    "name": getLabel('505968', '组织结构'),
                    "dataURL": null,
                    "dataParams": null,
                    "isSearch": false,
                    "showOrder": 0,
                    "selected": false
                }, {
                    "key": "1",
                    "name": getLabel('505969', '按列表'),
                    "dataURL": null,
                    "dataParams": {
                        "list": "1"
                    },
                    "isSearch": true,
                    "showOrder": 0,
                    "selected": false
                }]
            };
        } else if (this.browserType === '164' || this.browserType === '169' || this.browserType === '170' || this.browserType === '194') {
            this.tabs = {
                tabs: [{
                    "key": "2",
                    "name": getLabel('505968', '组织结构'),
                    "dataURL": null,
                    "dataParams": null,
                    "isSearch": false,
                    "showOrder": 0,
                    "selected": false
                }, {
                    "key": "1",
                    "name": getLabel('505969', '按列表'),
                    "dataURL": null,
                    "dataParams": {
                        "list": "1"
                    },
                    "isSearch": true,
                    "showOrder": 0,
                    "selected": false
                }]
            };
        } else {
            this.tabs = {};
        }
        this.isSingle = setting.isSingle;
    }
    getHitInfo(x, y, cellStyle, cellRect, context) {
        const { row, col, sheetArea, sheet } = context;
        return {
            x,
            y,
            row,
            col,
            cellRect,
            sheetArea,
            sheet,
        };
    }
    processMouseUp(hitInfo) {
        // 只读 不展示
        if (this.viewAttr && this.viewAttr == 1) {
            return;
        }
        const { x, y, cellRect, sheet, row, col, sheetArea, reservedLocation, isReservedLocation } = hitInfo;
        if (x && cellRect) {
            if (x >= cellRect.x + cellRect.width - this.clickwidth) {
                this.showBrowserModal(sheet.getCell(row, col, sheetArea), cellRect);
            }
            return true;
        }
        return super.processMouseUp(hitInfo);
    }
    showBrowserModal(context, cellRect) {
        // 只读 不展示
        if (this.viewAttr && this.viewAttr == 1) {
            return;
        }
        const { sheet, row, col } = context;
        if (!this.editor) {
            this.editor = document.createElement('div');
            const host = sheet.getParent().getHost();
            host.appendChild(this.editor);
            this.editor.style.visibility = 'hidden';
            $(this.editor).css({
                position: 'absolute',
                left: cellRect.x,
                top: cellRect.y,
                width: cellRect.width,
                height: cellRect.height,
            });
        }

        ReactDOM.unmountComponentAtNode(this.editor);

        const replaceDatas = context.value();

        const changeValue = (newValue, valueSpan, valueObj) => {
            sheet.getCell(row, col).value((valueObj || []).map(d => ({ id: d.id, name: d.name })));
        }
        ReactDOM.render(<WeaBrowser
            hasAdvanceSerach={true}
            ref={(ref) => this.browserInstance = ref}
            onChange={changeValue}
            dataParams={this.dataParams}
            destDataParams={this.dataParams}
            replaceDatas={(replaceDatas || [])}
            memorise={true}
            type={this.browserType}
            title={this.browserTitile}
            iconBgcolor={"#217346"}
            isSingle={this.isSingle}
            {...this.tabs}
        />, this.editor);
        const openModal = () => {
            if (this.browserInstance) {
                this.browserInstance.openModal();
            } else {
                setTimeout(() => {
                    openModal();
                }, 50);
            }
        }
        openModal();
    }
}